<template>
  <div>
    <header class="header">
      <span>广州</span>
      <span>影院</span>
      <i class="fa fa-search" style="font-size: 20px"></i>
    </header>
    <div class="newsContent">
      <div class="List" v-for="item in state.value" :key="item.cinemaId">
        <div class="list-l">
          <p class="p_name">{{ item.name }}</p>
          <p>{{ item.address }}</p>
        </div>
        <div class="list-r">
          <span>￥{{item.lowPrice.toString().substr(0,2)}}</span>
          <span>距离未知</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { reactive, onMounted } from "vue";
import { getCinemas } from "../api/mockApi.js";
const state = reactive([]);
onMounted(() => {
  // axios.get("../data/cinemas.json").then((res) => {
  //   state.value = res.data.data.cinemas;
  //   // console.log(state);
  // });
getCinemas().then(res=>{
  // console.log(res.cinemas);
  state.value = res.cinemas;
})
});
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 3px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.newsContent {
  width: 100%;
  height: 93%;
  .List {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    padding: 5px 9px;
  }
  .list-l {
    height: 100%;
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    p {
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
    }
    .p_name{
      font-size: 17px !important;
    }
  }
  .list-r{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    span{
      color: orange;
    }
  }
}
</style>